<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}} - NeoBase</title>
    <!--[if mso]>
    <noscript>
        <xml>
            <o:OfficeDocumentSettings>
                <o:PixelsPerInch>96</o:PixelsPerInch>
            </o:OfficeDocumentSettings>
        </xml>
    </noscript>
    <![endif]-->
    <style type="text/css">
        /* Import fonts */
        @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600;700;800&display=swap');

        /* Mobile-first responsive styles */
        @media only screen and (max-width: 600px) {
            .email-container {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
            }

            .email-content {
                width: 100% !important;
                max-width: 100% !important;
                padding: 15px !important;
                border-radius: 0 !important;
            }

            .header-content {
                padding: 30px 20px !important;
            }

            .main-content {
                padding: 30px 20px !important;
            }

            .footer-content {
                padding: 20px !important;
            }

            h1 {
                font-size: 28px !important;
            }

            h2 {
                font-size: 24px !important;
            }

            h3 {
                font-size: 18px !important;
            }

            /* Force container responsiveness */
            table[width="600"] {
                width: 100% !important;
                max-width: 100% !important;
            }
        }

        /* Force text colors for email clients - Override ALL theme inheritance */
        .black-text,
        .black-text *,
        h1,
        h1 *,
        h2,
        h2 *,
        h3,
        h3 *,
        h4,
        h4 *,
        h5,
        h5 *,
        h6,
        h6 * {
            color: #000000 !important;
        }

        .gray-text,
        .gray-text *,
        p,
        p *,
        span,
        span *,
        div,
        div * {
            color: #374151 !important;
        }

        .muted-text,
        .muted-text * {
            color: #6b7280 !important;
        }

        .green-text,
        .green-text * {
            color: #10b981 !important;
        }

        .white-text,
        .white-text *,
        a,
        a * {
            color: #ffffff !important;
        }

        /* Font families */
        .primary-font {
            font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        .secondary-font {
            font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
        }

        /* Main styles matching NeoBase design system */
        body {
            margin: 0 !important;
            padding: 0 !important;
            background-color: #fef3c7 !important;
            /* Neo-brutalism yellow background */
            font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.6;
            color: #374151;
        }

        .email-container {
            max-width: 600px;
            margin: 0 auto;
            background-color: #ffffff;
            border: 3px solid #000000;
            /* Bold black border */
            border-radius: 12px;
            box-shadow: 6px 6px 0px #000000;
            /* Neo-brutalism shadow */
            overflow: hidden;
        }

        .email-header {
            padding: 40px 30px 20px;
            text-align: center;
            background-color: #ffffff;
        }

        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 16px;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .logo-icon svg {
            width: 100%;
            height: 100%;
            border-radius: 8px;
        }

        .logo-text {
            font-size: 32px;
            font-weight: bold;
            color: #000000;
            margin: 0;
        }

        .email-title {
            font-size: 24px;
            font-weight: bold;
            color: #000000;
            margin: 0 0 16px 0;
        }

        .email-subtitle {
            font-size: 16px;
            color: #6b7280;
            margin: 0;
        }

        .email-body {
            padding: 0 30px 30px;
            background-color: #ffffff;
        }

        .email-footer {
            padding: 30px;
            text-align: center;
            background-color: #f9fafb;
            border-top: 1px solid #e5e7eb;
        }

        .footer-text {
            font-size: 16px;
            color: #374151;
            margin: 0 0 8px 0;
        }

        .footer-signature {
            font-size: 16px;
            font-weight: 600;
            color: #000000;
            margin: 0 0 20px 0;
        }

        .footer-disclaimer {
            font-size: 12px;
            color: #9ca3af;
            margin: 0;
            font-style: italic;
        }

        /* Neo-brutalism button style */
        .neo-button {
            display: inline-block;
            background-color: #000000;
            color: #ffffff !important;
            text-decoration: none;
            padding: 16px 32px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            border: 3px solid #000000;
            box-shadow: 4px 4px 0px #10b981;
            transition: all 0.2s ease;
        }

        .neo-button:hover {
            transform: translate(2px, 2px);
            box-shadow: 2px 2px 0px #10b981;
        }

        /* Responsive styles */
        @media only screen and (max-width: 600px) {
            .email-container {
                margin: 10px;
                border-radius: 8px;
            }

            .email-header,
            .email-body,
            .email-footer {
                padding-left: 20px;
                padding-right: 20px;
            }

            .logo-text {
                font-size: 28px;
            }

            .email-title {
                font-size: 20px;
            }
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .email-container {
                background-color: #ffffff !important;
            }
        }
    </style>
</head>

<body>
    <div style="padding: 20px 0;">
        <div class="email-container">
            <!-- Header -->
            <div class="email-header">
                <h1 class="logo-text" style="font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 32px; font-weight: bold; color: #000000; margin: 0 0 16px 0; text-align: center;">NeoBase</h1>
                <h2 class="email-title">{{header_title}}</h2>
                <p class="email-subtitle">{{header_subtitle}}</p>
            </div>

            <!-- Body -->
            <div class="email-body">
                {{content}}
            </div>

            <!-- Footer -->
            <div class="email-footer">
                <p class="footer-text">Best regards,</p>
                <p class="footer-signature">The NeoBase Team</p>
                <p class="footer-disclaimer">
                    {{footer_disclaimer}}
                </p>
            </div>
        </div>
    </div>
</body>

</html>